<template>
  <div>
    <div v-for="song in songs" :key="song.id">
      <div>{{ song.title }}</div>
      <button @click="play(song)">播放</button>
    </div>
    <audio ref="audio" :src="currentSong.url"></audio>
  </div>
</template>

<script>
  import { reactive, ref } from "vue";

  export default {
    setup() {
      const songs = reactive([
        { id: 1, title: "歌曲1", url: "歌曲链接1" },
        { id: 2, title: "歌曲2", url: "歌曲链接2" },
        { id: 3, title: "歌曲3", url: "歌曲链接3" },
      ]);

      const currentSong = reactive({
        title: "",
        url: "",
      });

      const audio = ref(null);

      const play = (song) => {
        currentSong.title = song.title;
        currentSong.url = song.url;
        audio.value.play();
      };

      return {
        songs,
        currentSong,
        audio,
        play,
      };
    },
  };
</script>
